<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
    <body>
        <em>em</em>
        <div class="box" abc="hahaha" id="cont" title="这是一个title">
            <span>1</span>
            hello
            <!-- 这是一个注释 -->
            <span>2</span>
        </div>
        <p>p</p>

    </body>
    <script>
        var obox=document.querySelector(".box");
        // 获取元素节点
        console.log(obox.children);
        // 获取所有子节点   （包含换行产生的文本节点）
        console.log(obox.childNodes);
            // 0: text
            // 1: span
            // 2: text
            // 3: comment
            // 4: text
            // 5: span
            // 6: text
        console.log(obox.firstChild);               //第一个子节点
        console.log(obox.lastChild);                //最后一个子节点
        console.log(obox.previousSibling);          //上一个节点
        console.log(obox.nextSibling);              //下一个节点


        // 获取根节点
        console.log(document);
        // ↑↑和↓↓↓两种方法获取的一样
        console.log(obox.ownerDocument);
        console.log(document === obox.ownerDocument)        //返回值为true，则二者一样

        // 获取属性节点     （标签的属性）
        console.log(obox.attributes);

</script>
</html>